<!DOCTYPE html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <script src='../../../webcomponentsjs/webcomponents-lite.js'></script>
    <script src='../../../web-component-tester/browser.js'></script>
    <link rel='import' href='../../polymer.html'>
  </head>
  <body>
    <preservation-templatizer></preservation-templatizer>
  
    <template id='stampable'>
      <h2>Unmodified</h2>
      <span id='html'>{{html}}</span>
      <template preserve-content id='unmodified'>
        <style>
          [attribute] {
            display: none,
          }
        </style>
        <div>style tag present</div>
      </template>
    </template>
      
    <dom-module id='preservation-templatizer'>

      <template>
        <h2>Modified</h2>
        <span>{{html}}<span/>
        <template preserve-content id='modified'>
          <style>
            #identifier {
              color: blue;
            }
          </style>
          <div>style tag missing</div>
        </template>
      </template>
      <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'preservation-templatizer',
          behaviors: [
            Polymer.Templatizer
          ],
          created: function () {
            this.templatize(document.body.querySelector('#stampable'));
          },
          ready: function () {
            var div = document.createElement('DIV');
            var instance = this.stamp({html: 'unresolved'});
            var unmodified = instance.root.querySelector('#unmodified');

            div.innerHTML = (this.$.modified).innerHTML;
            console.log(div.firstElementChild.localName, div.firstElementChild);

            div.innerHTML = (unmodified).innerHTML;
            console.log(div.firstElementChild.localName, div.firstElementChild);
          }
        });
      });
      </script>
    </dom-module>
        
    <script>
    suite('polymer: template preserve-content', function() {

      test('nested <template preserve-content/> should retain <style/> in a <dom-module/>', function() {
        var element = document.querySelector('preservation-templatizer');
        assert.ok(element.$.modified.content.querySelector('style'));
      });

      test('nested <template preserve-content/> should retain <style/> in a stamped <template/>', function() {
        var element = document.querySelector('preservation-templatizer');
        element.templatize(document.querySelector('#stampable'));
        assert.ok(element.stamp().root.querySelector('#unmodified').content.querySelector('style'));
      });

    });
    </script>
  </body>
</html>
